@import "tailwindcss";
@source "../../packages/registry/src//**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

@import "tw-animate-css";

@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-autocontrast";
@plugin "@tailwindcss/typography";

@import "./docs.css";
@import "@dotui/registry/lib/focus-styles.css";

@variant dark (&:where(.dark, .dark *));

/* Base Colors */
:root {
  --radius-factor: 1;

  --neutral-50: hsl(0, 0%, 98%);
  --neutral-100: hsl(0, 0%, 96%);
  --neutral-200: hsl(0, 0%, 94%);
  --neutral-300: hsl(0, 0%, 90%);
  --neutral-400: hsl(0, 0%, 85%);
  --neutral-500: hsl(0, 0%, 80%);
  --neutral-600: hsl(0, 0%, 75%);
  --neutral-700: hsl(0, 0%, 70%);
  --neutral-800: hsl(0, 0%, 28%);
  --neutral-900: hsl(0, 0%, 16%);
  --neutral-950: hsl(0, 0%, 12%);

  --accent-50: hsl(210, 100%, 88%);
  --accent-100: hsl(210, 100%, 85%);
  --accent-200: hsl(210, 100%, 81%);
  --accent-300: hsl(210, 100%, 74%);
  --accent-400: hsl(210, 100%, 67%);
  --accent-500: hsl(210, 64%, 55%);
  --accent-600: hsl(210, 51%, 44%);
  --accent-700: hsl(210, 51%, 36%);
  --accent-800: hsl(210, 52%, 29%);
  --accent-900: hsl(211, 52%, 17%);
  --accent-950: hsl(211, 52%, 12%);

  --success-50: hsl(130, 34%, 83%);
  --success-100: hsl(130, 34%, 80%);
  --success-200: hsl(131, 35%, 75%);
  --success-300: hsl(131, 35%, 66%);
  --success-400: hsl(132, 35%, 56%);
  --success-500: hsl(131, 41%, 43%);
  --success-600: hsl(132, 41%, 34%);
  --success-700: hsl(132, 41%, 28%);
  --success-800: hsl(131, 41%, 23%);
  --success-900: hsl(131, 40%, 13%);
  --success-950: hsl(132, 42%, 9%);

  --warning-50: hsl(35, 100%, 80%);
  --warning-100: hsl(35, 100%, 75%);
  --warning-200: hsl(35, 100%, 69%);
  --warning-300: hsl(35, 100%, 58%);
  --warning-400: hsl(35, 93%, 49%);
  --warning-500: hsl(35, 92%, 41%);
  --warning-600: hsl(35, 93%, 32%);
  --warning-700: hsl(35, 93%, 26%);
  --warning-800: hsl(35, 93%, 22%);
  --warning-900: hsl(35, 94%, 12%);
  --warning-950: hsl(36, 91%, 9%);

  --danger-50: hsl(358, 69%, 90%);
  --danger-100: hsl(358, 69%, 88%);
  --danger-200: hsl(358, 69%, 85%);
  --danger-300: hsl(358, 70%, 79%);
  --danger-400: hsl(358, 69%, 73%);
  --danger-500: hsl(358, 69%, 63%);
  --danger-600: hsl(358, 64%, 49%);
  --danger-700: hsl(358, 63%, 41%);
  --danger-800: hsl(358, 64%, 33%);
  --danger-900: hsl(357, 64%, 20%);
  --danger-950: hsl(358, 65%, 15%);

  --info-50: hsl(210, 100%, 88%);
  --info-100: hsl(210, 100%, 84%);
  --info-200: hsl(210, 100%, 81%);
  --info-300: hsl(210, 100%, 74%);
  --info-400: hsl(210, 100%, 67%);
  --info-500: hsl(210, 64%, 55%);
  --info-600: hsl(210, 51%, 44%);
  --info-700: hsl(210, 51%, 36%);
  --info-800: hsl(210, 52%, 29%);
  --info-900: hsl(211, 52%, 17%);
  --info-950: hsl(211, 52%, 12%);
}

.dark {
  --neutral-50: hsl(240, 6%, 4%);
  --neutral-100: hsl(240, 6%, 7%);
  --neutral-200: hsl(240, 6%, 10%);
  --neutral-300: hsl(240, 6%, 17%);
  --neutral-400: hsl(240, 6%, 23%);
  --neutral-500: hsl(240, 6%, 33%);
  --neutral-600: hsl(240, 6%, 47%);
  --neutral-700: hsl(240, 6%, 55%);
  --neutral-800: hsl(240, 6%, 70%);
  --neutral-900: hsl(240, 6%, 85%);
  --neutral-950: hsl(240, 10%, 98%);

  --accent-50: hsl(211, 51%, 12%);
  --accent-100: hsl(211, 51%, 15%);
  --accent-200: hsl(211, 52%, 18%);
  --accent-300: hsl(210, 52%, 29%);
  --accent-400: hsl(209, 51%, 40%);
  --accent-500: hsl(210, 52%, 48%);
  --accent-600: hsl(210, 51%, 55%);
  --accent-700: hsl(210, 68%, 62%);
  --accent-800: hsl(210, 97%, 71%);
  --accent-900: hsl(210, 100%, 82%);
  --accent-950: hsl(210, 100%, 87%);

  --success-50: hsl(131, 44%, 8%);
  --success-100: hsl(131, 44%, 11%);
  --success-200: hsl(130, 41%, 14%);
  --success-300: hsl(131, 41%, 18%);
  --success-400: hsl(132, 41%, 22%);
  --success-500: hsl(131, 41%, 44%);
  --success-600: hsl(131, 41%, 48%);
  --success-700: hsl(131, 41%, 54%);
  --success-800: hsl(131, 34%, 70%);
  --success-900: hsl(131, 34%, 76%);
  --success-950: hsl(130, 35%, 83%);

  --warning-50: hsl(35, 100%, 7%);
  --warning-100: hsl(35, 100%, 18%);
  --warning-200: hsl(34, 100%, 21%);
  --warning-300: hsl(35, 96%, 22%);
  --warning-400: hsl(35, 100%, 38%);
  --warning-500: hsl(35, 100%, 48%);
  --warning-600: hsl(35, 100%, 58%);
  --warning-700: hsl(35, 100%, 66%);
  --warning-800: hsl(35, 93%, 65%);
  --warning-900: hsl(35, 100%, 72%);
  --warning-950: hsl(35, 100%, 80%);

  --danger-50: hsl(357, 64%, 14%);
  --danger-100: hsl(357, 64%, 18%);
  --danger-200: hsl(358, 64%, 21%);
  --danger-300: hsl(358, 64%, 26%);
  --danger-400: hsl(358, 64%, 32%);
  --danger-500: hsl(358, 64%, 42%);
  --danger-600: hsl(358, 69%, 51%);
  --danger-700: hsl(358, 69%, 60%);
  --danger-800: hsl(358, 69%, 70%);
  --danger-900: hsl(359, 70%, 86%);
  --danger-950: hsl(358, 69%, 90%);

  --info-50: hsl(211, 51%, 12%);
  --info-100: hsl(211, 51%, 15%);
  --info-200: hsl(211, 52%, 18%);
  --info-300: hsl(210, 52%, 29%);
  --info-400: hsl(209, 51%, 40%);
  --info-500: hsl(210, 52%, 48%);
  --info-600: hsl(210, 51%, 55%);
  --info-700: hsl(210, 68%, 62%);
  --info-800: hsl(210, 97%, 71%);
  --info-900: hsl(210, 100%, 82%);
  --info-950: hsl(210, 100%, 87%);
}

@theme {
  /* fonts */
  --font-josefin: var(--font-josefin);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  --font-heading: var(--font-geist-sans);
  --font-body: var(--font-geist-sans);

  /* colors */
  --color-bg: var(--neutral-50);
  --color-card: var(--neutral-100);
  --color-popover: var(--neutral-100);
  --color-muted: var(--neutral-200);
  --color-inverse: var(--neutral-950);
  --color-disabled: var(--neutral-200);

  --color-neutral: var(--neutral-200);
  --color-neutral-hover: var(--neutral-300);
  --color-neutral-active: var(--neutral-400);

  --color-primary: var(--neutral-950);
  --color-primary-hover: var(--neutral-900);
  --color-primary-active: var(--neutral-800);
  --color-primary-muted: var(--neutral-200);

  --color-success: var(--success-500);
  --color-success-hover: var(--success-600);
  --color-success-active: var(--success-700);
  --color-success-muted: var(--success-100);
  --color-success-muted-hover: var(--success-200);

  --color-danger: var(--danger-500);
  --color-danger-hover: var(--danger-600);
  --color-danger-active: var(--danger-700);
  --color-danger-muted: var(--danger-100);
  --color-danger-muted-hover: var(--danger-200);

  --color-warning: var(--warning-500);
  --color-warning-hover: var(--warning-600);
  --color-warning-active: var(--warning-700);
  --color-warning-muted: var(--warning-100);
  --color-warning-muted-hover: var(--warning-200);

  --color-info: var(--info-500);
  --color-info-hover: var(--info-600);
  --color-info-active: var(--info-700);
  --color-info-muted: var(--info-50);

  --color-accent: var(--accent-500);
  --color-accent-hover: var(--accent-600);
  --color-accent-active: var(--accent-700);
  --color-accent-muted: var(--accent-50);
  --color-accent-muted-hover: var(--accent-100);

  --color-fg: var(--neutral-950);
  --color-fg-muted: var(--neutral-800);
  --color-fg-inverse: var(--neutral-50);
  --color-fg-disabled: var(--neutral-500);
  --color-fg-primary-disabled: var(--neutral-300);
  --color-fg-danger: var(--danger-700);
  --color-fg-warning: var(--warning-700);
  --color-fg-success: var(--success-700);
  --color-fg-info: var(--info-700);
  --color-fg-accent: var(--accent-700);

  --color-fg-on-neutral: var(--on-neutral-200);
  --color-fg-on-primary: var(--on-neutral-950);
  --color-fg-on-accent: var(--on-accent-500);
  --color-fg-on-success: var(--on-success-500);
  --color-fg-on-danger: var(--on-danger-500);
  --color-fg-on-warning: var(--on-warning-500);
  --color-fg-on-info: var(--on-info-500);

  --color-border: var(--neutral-300);
  --color-border-hover: var(--neutral-400);
  --color-border-field: var(--neutral-400);
  --color-border-control: var(--neutral-700);
  --color-border-disabled: var(--neutral-300);
  --color-border-focus: var(--accent-500);
  --color-border-focus-muted: var(--accent-300);

  --color-border-success: var(--success-300);
  --color-border-success-hover: var(--success-400);
  --color-border-accent: var(--accent-300);
  --color-border-accent-hover: var(--accent-400);
  --color-border-danger: var(--danger-300);
  --color-border-danger-hover: var(--danger-400);
  --color-border-warning: var(--warning-300);
  --color-border-warning-hover: var(--warning-400);
  --color-border-info: var(--info-300);
  --color-border-info-hover: var(--info-400);

  /* radius */
  --radius-xs: calc(0.125rem * var(--radius-factor));
  --radius-sm: calc(0.25rem * var(--radius-factor));
  --radius-md: calc(0.375rem * var(--radius-factor));
  --radius-lg: calc(0.5rem * var(--radius-factor));
  --radius-xl: calc(0.75rem * var(--radius-factor));
  --radius-2xl: calc(1rem * var(--radius-factor));
  --radius-3xl: calc(1.5rem * var(--radius-factor));
  --radius-4xl: calc(2rem * var(--radius-factor));

  /* breakpoints */
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;

  /* easing */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

@theme inline {
  /* animations */
  --animate-accordion-down: accordion-down 0.15s ease-out;
  --animate-accordion-up: accordion-up 0.15s ease-out;
  --animate-collapsible-down: collapsible-down 0.15s ease-out;
  --animate-collapsible-up: collapsible-up 0.15s ease-out;
  --animate-line-spinner: line-spinner 1.2s linear infinite;
  --animate-dot-spinner: dot-spinner 0.8s linear infinite;
  /* progress-bar */
  --animate-progress-indeterminate:
    progress-grow var(--progress-duration) 1 both normal,
    progress-pulse 1s ease var(--progress-duration) infinite normal none running;
  /* loader:ring-2 */
  --animate-loader-ring-stretch: loader-ring-stretch
    calc(var(--loader-speed) * 0.75) ease-in-out infinite;
}

@theme inline {
  --shadow-shine:
    inset 0px 0px 0px 1px
      color-mix(in srgb, var(--color-shine) 15%, transparent),
    inset 0px 1px 0px color-mix(in srgb, var(--color-shine) 30%, transparent);
}

/* loader:ring-2 */
@keyframes loader-ring-stretch {
  0% {
    stroke-dasharray: 0, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 75, 150;
    stroke-dashoffset: -25;
  }
  100% {
    stroke-dashoffset: -99;
  }
}

/* Accordion */

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes collapsible-down {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
}

@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

@keyframes progress-grow {
  0% {
    transform: scaleX(0.01);
  }
  20% {
    transform: scaleX(0.1);
  }
  30% {
    transform: scaleX(0.6);
  }
  40%,
  50% {
    transform: scaleX(0.9);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes progress-pulse {
  0% {
    mask-position: 200% center;
  }
  100% {
    mask-position: 0% center;
  }
}

@keyframes line-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
}

@keyframes dot-spinner {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.15;
    transform: scale(0.5);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-bg text-fg;
  }
}
